<template>
  <el-aside class="aside">
    <el-menu
      class="menu"
      router
      :collapse="collapse"
      :default-active="$route.path"
      unique-opened
      background-color="#334144"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-submenu :index="item.title" v-for="item in list" :key="item.title">
        <template v-slot:title>
          <i :class="item.icon"></i
          ><span slot="title">{{ item.title }}</span></template
        >
        <el-menu-item-group>
          <el-menu-item
            :index="link.url"
            v-for="link in item.children"
            :key="link.url"
            :disabled="link.disabled"
            >{{ link.title }}</el-menu-item
          >
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      list: [
        {
          icon: "el-icon-s-tools",
          title: "布局Layout",
          children: [
            {
              url: "/layout/flex-waterfalls-flow",
              title: "CSS 实现瀑布流布局（display：flex）",
            },
            {
              url: "/layout/colum-waterfalls-flow",
              title: "CSS实现瀑布流布局（column-count）",
            },
            {
              url: "/layout/grid-waterfalls-flow",
              title: "CSS实现瀑布流布局（display：grid）",
            },
            {
              url: "/layout/multi-row-or-column",
              title: "多方案实现跨行或跨列布局",
            },
            {
              url: "/layout/single-column-isometric",
              title: "多种方案实现单列等宽，其他多列自适应均匀布局",
            },
            {
              url: "/layout/multi-column-contour",
              title: "6种实现多列等高的方法",
            },
            {
              url: "/layout/holy-grail-layout",
              title: "圣杯布局",
            },
            {
              url: "/layout/flex-holy-grail-layout",
              title: "圣杯布局",
            },
            {
              url: "/layout/double-wing-layout",
              title: "双飞翼布局",
            },
            {
              url: "/layout/best-way-to-center-element",
              title: "实现水平垂直居中最便捷的方法",
            },
            {
              url: "/layout/use-margin-auto-to-simulate-space-between",
              title:
                "使用 margin auto 实现 flex 下的 justify-content: space-between",
            },
            {
              url: "/layout/use-margin-auto-to-simulate-align-self",
              title: "使用 margin auto 实现 flex 下的 align-self: flex-end",
            },
          ],
        },
        {
          icon: "el-icon-s-tools",
          title: "阴影",
          children: [
            {
              url: "/shadow/one-sided-shadow",
              title: "单侧投影",
            },
            {
              url: "/shadow/solid-shadow",
              title: "立体投影",
            },
            {
              url: "/shadow/word-solid-shadow",
              title: "立体文字阴影",
            },
            {
              url: "/shadow/long-shadow",
              title: "线性渐变模拟长阴影",
            },
            {
              url: "/shadow/word-solid-shadow-ii",
              title: "线性渐变配合阴影实现条纹立体阴影条纹字",
            },
            {
              url: "/shadow/opacity-wrap",
              title: "使用 box-shadow 实现半透明遮",
            },
            {
              url: "/shadow/shadow-ani",
              title: "box-shadow实现背景动画",
            },
            {
              url: "/shadow/shadow-ani-ii",
              title: "box-shadow实现背景动画",
            },
            {
              url: "/shadow/neon-shadow-light",
              title: "box-shadow实现霓虹氖灯文字效果",
            },
            {
              url: "/shadow/ie-logo",
              title: "单标签借助 inset shdow 实现IE LOGO",
            },
            {
              url: "/shadow/douyin-logo",
              title: "单标签实现抖音LOGO",
            },
            {
              url: "/shadow/circle-loading",
              title: "Box-shadow实现圆环进度条动画",
            },
            {
              url: "/shadow/inscribed-angle",
              title: "使用box-shadow/渐变实现内切角",
            },
            {
              url: "/shadow/single-div-fork",
              title: "单标签实现叉子图形",
            },
          ],
        },
        {
          icon: "el-icon-s-tools",
          title: "伪元素",
          children: [
            {
              url: "/pseudo/not",
              title: "使用:not()伪类实现弹窗背景元素模糊",
            },
            {
              url: "/pseudo/not-2",
              title: "使用:not()伪类控制特殊边框样式",
            },
            {
              url: "/pseudo/juejin",
              title: "实现掘金登陆特效",
            },
            {
              url: "/pseudo/focus-within-placeholder-shown",
              title: "实现 input 输入交互",
            },
            {
              url: "/pseudo/bubble",
              title: "伪元素+border实现气泡对话框",
            },
            {
              url: "/pseudo/focus-checked",
              title: "使用 checked 伪类实现纯 CSS Tab 切换",
            },
            {
              url: "/pseudo/focus-target",
              title: "使用 target 伪类实现纯 CSS Tab 切换",
            },
            {
              url: "/pseudo/focus-within",
              title: "focus-within switch tab",
            },
            {
              url: "/pseudo/animation-control-hover",
              title: "伪元素 hover 实现纯 CSS 方式控制动画的暂停与播放",
            },
            {
              url: "/pseudo/animation-control",
              title: "伪元素 checked 实现纯 CSS 方式控制动画的暂停与播放",
            },
            {
              url: "/pseudo/animation-control-target",
              title: "伪元素 target 实现纯 CSS 方式控制动画的暂停与播放",
            },
            {
              url: "/pseudo/boundary-judge",
              title: "伪元素实现边界智能判断移动",
            },
            {
              url: "/pseudo/loading-content",
              title: "伪元素实现打点 loading 效果",
            },
            {
              url: "/pseudo/loading-line",
              title: "伪元素遮罩实现线条 loading 效果",
            },
          ],
        },
        {
          icon: "el-icon-s-tools",
          title: "滤镜",
          children: [
            {
              url: "/filter/shadow",
              title: "生成彩色阴影",
            },
            {
              url: "/filter/blur-constrast",
              title: "生成特殊融合效果",
            },
            {
              url: "/filter/fire",
              title: "生成火焰效果",
            },
            {
              url: "/filter/fire-2",
              title: "生成火焰效果2",
            },
            {
              url: "/filter/mix",
              title: "滤镜及混合模式混搭特效",
            },
            {
              url: "/filter/single-div-water-drop",
              title: "单标签实现滴水效果",
            },
            {
              url: "/filter/ball-through",
              title: "小球穿梭效果",
            },
            {
              url: "/filter/ball-loading",
              title: "小球穿梭放大loading动画",
            },
            {
              url: "/filter/hue-rotate-color",
              title: "实现渐变背景动画",
            },
            {
              url: "/filter/polygon-shadow",
              title: "生成规则阴影",
            },
            {
              url: "/filter/ghost",
              title: "单标签纯CSS实现幽灵动画",
            },
          ],
        },
        {
          icon: "el-icon-s-tools",
          title: "边框",
          children: [
            { title: "实现波浪动画", url: "/border/wave" },
            { title: "实现波浪百分比图", url: "/border/wave-percent" },
            { title: "实现充电动画", url: "/border/chargin" },
            { title: "变换实现loading效果", url: "/border/loading" },
            { title: "变换实现文字输入效果", url: "/border/typing" },
            { title: "单标签线条动画", url: "/border/line-animation" },
            {
              title: "使用outline巧妙实现加号符号",
              url: "/border/line-drop-animation",
            },
            { title: "实现波浪动画", url: "/border/outline-symbol-add" },
            {
              title: "巧用overflow及实现边框线条动画",
              url: "/border/overflow-btn",
            },
          ],
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["collapse"]),
  },
  mounted() {
    this.verticals = document.getElementsByClassName("el-menu--vertical");
    this.verticals.length &&
      this.verticals.map((vertical) => {
        let ulNode = vertical.children[0].children[0].children[1];
        console.log(ulNode);
      });
  },
};
</script>

<style lang="scss" scoped>
.aside {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    width: 0;
  }
  .el-menu:not(.el-menu--collapse) {
    width: 300px;
  }
  .el-menu--collapse {
    width: 65px;
  }
  ::v-deep .el-menu-item-group__title {
    display: none;
  }
  ul {
    height: 100%;
  }
}
</style>
